<template>
  <div class="app-container">
    <el-row :gutter="24" class="mb8">
      <el-col :span="12">
        <el-button style="margin-right: 10px" :type="isChangeTabs?'primary':''" @click="NewsMatter()">资讯图文素材库(<span style="color: #F56C6C;font-weight: bold;font-size: 14px;">{{totalMat}}</span>)</el-button>
        <el-button style="margin-left: 0" :type="isChangeTabs?'':'primary'" @click="NewsPut()">上架列表(<span style="color: #F56C6C;font-weight: bold;font-size: 14px;">{{totalPut}}</span>) </el-button>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button style="margin: 4px 0 0 0" type="primary" icon="el-icon-refresh" size="mini" @click="$router.go(0)">刷新</el-button>
      </el-col>
    </el-row>
    <div v-show="isChangeTabs">
      <newsMatter ref="newsmatter" @closeNewsMatter="closeNewsMatter"></newsMatter>
    </div>
    <div v-show="!isChangeTabs">
      <newsPut ref="newsput" @closeNewsPut="closeNewsPut"></newsPut>
    </div>
  </div>
</template>

<script>
  import newsPut from "@/components/News/newsPut";
  import newsMatter from "@/components/News/newsMatter";
  export default {
    name: "News",
    components: { newsPut, newsMatter },
    data() {
      return {
        isChangeTabs: true,
        totalMat: '',
        totalPut: ''
      };
    },
    methods: {
      closeNewsMatter(val){
        this.totalMat = val
      },
      closeNewsPut(val){
        this.totalPut = val
      },
      NewsMatter(){
        this.isChangeTabs = true
        this.$refs.newsmatter.getList();
      },
      NewsPut(){
        this.isChangeTabs = false
        this.$refs.newsput.getList();
      },
    }
  };
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
</style>
